<template>
  <div class="person">
    姓: <input type="text" v-model="firstname"><br>
    名: <input type="text" v-model="lastname"><br>
    全名: <span>{{fullname}}</span>
    <br>
    <button @click="changeFullname">修改全名li-si</button>
  </div>
</template>

<script setup lang="ts" name="Person">
import {ref, computed} from "vue";

let firstname = ref('zhang');
let lastname = ref('三');

// let fullname = computed(() => {
//   // 只读计算属性
//   return firstname.value.slice(0,1).toUpperCase() + firstname.value.slice(1) + '-' + lastname.value
// })
let fullname = computed({
  // 读写计算属性
  get(){
    return firstname.value.slice(0,1).toUpperCase() + firstname.value.slice(1) + '-' + lastname.value
  },
  set(newValue){
    console.log(newValue)
    let [str1, str2] = newValue.split('-')
    firstname.value = str1
    lastname.value = str2
  }
})

function changeFullname() {
  fullname.value = 'Li-si'
}

</script>


<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>